{% extends "base.html" %}

{% block head %}
{{ super() }}
{% endblock %}

{% block import_area %}
{{ super() }}

<script src="{{url_for('static', filename='../static/js/jquery-1.10.2.js')}}" type="text/javascript" charset="utf-8"></script>
<!--  script src="{{url_for('static', filename='../static/js/plugins/jquery-ui-1.10.3.custom.js')}}" type="text/javascript" charset="utf-8"></script-->
<script src="{{url_for('static', filename='../static/bootstrap/js/bootstrap.min.js')}}" type="text/javascript" charset="utf-8"></script>
<script src="{{url_for('static', filename='../static/js/plugins/jquery.sortable.js')}}" type="text/javascript" charset="utf-8"></script>
<script src="{{url_for('static', filename='../static/js/control/ztable.js')}}" type="text/javascript" charset="utf-8"></script>
<script src="{{url_for('static', filename='../static/js/control/zform.js')}}" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../static/bootstrap/css/bootstrap.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../static/css/style.css" type="text/css" media="screen" />
{% endblock %}


{% block js_code %}
{{ super() }}
<script>
	$(document).ready(function(){
		
		$(".source, .target").sortable({
	      connectWith: ".connected"
	    });
		
		
		
		/*
		function select_spec(row){
			
		}
		var $SpecForm = $('#spec-form').ZForm();
		
		$('#spec-source-list').ZTable({
			columns:{'name':'Name'},
			datas:{{ specs | safe }},
			with_title:false,
			select_row_cb: select_spec//,
			//row_id: defaults['sprint_id']
			});
		
		$('#spec-target-list').ZTable({
			columns:{'name':'Name'},
			datas:[],
			with_title:false,
			select_row_cb: select_spec//,
			//row_id: defaults['sprint_id']
			});
		*/
	});
</script>
{% endblock %}

{% block content %}

		<div id="toolbar-row" class="row z-toolbar col-sm-12">
			<div class="btn-toolbar col-xs-10 col-sm-8">
				<button class="btn btn-primary col-md-2 z-btn-new" data-toggle="modal" data-target="#spec-dialog">New</button>
				<button class="btn btn-primary col-md-2 z-btn-edit" data-toggle="modal" data-target="#spec-dialog">Edit</button>
				<button class="btn btn-primary col-md-2">Delete</button>
				<button class="btn btn-primary col-md-2 z-btn-submit">Submit</button>
			</div>
		</div>

		<div class="left-area col-sm-2">
		</div>


		<!--  div class="main-area col-sm-10">
			<ul id="spec-source-list"></ul>
			<ul id="spec-target-list"></ul>
		</div -->
		<div class="main-area col-sm-10">
			
			<!-- div id="spec-source-list" class="col-sm-3">
				<table>
					<tbody class="source connected">
						<tr>
							<td>A</td>
							<td>B</td>			
						</tr>
					</tbody>
				</table>
			</div>
			<div id="spec-target-list" class="col-sm-3">
				<table>
					<tbody class="target connected">
						<tr>
							<td>C</td>
							<td>D</td>			
						</tr>
					</tbody>
				</table>
			</div -->
			
<div class="sideBySide">
  <div class="left">
    <ul class="source connected">
      <li>My<span class="col-sm-3">Alfa Romeo</span><span class="col-sm-4">Implement</span>
      					<select name="importance">
							<option value="0">{{"Must have"}}</option>
							<option value="1">{{"Nice to have"}}</option>
							<option value="2">{{"Consider later"}}</option>
						</select>
	 </li>
	
      <li>Audi</li>
      <li>BMW</li>
      <li>Ford</li>
      <li>Jaguar</li>
      <li>Mercedes</li>
      <li>Porsche</li>
      <li>Tesla</li>
      <li>Volkswagen</li>
      <li>Volvo</li>
    </ul>
  </div>
  <div class="right">
    <ul class="target connected">
    </ul>
  </div>
</div>
		</div>

	<!-- New Spec Modal Dialog-->
	<div class="modal fade" id="spec-dialog" tabindex="-1" role="dialog" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	        <h4 class="modal-title">New Specification</h4>
	      </div>
	      
		<div class="modal-body">
			<form id="edit-spec-form" onsubmit="return false;">
				<div class="row form-group">
					<div class="z-label col-md-2">{{'Name'}}</div>
					<div class="col-md-7">
						<input class="form-control" type="text" name="name" placeholder="{{ 'Specification name' }}" />
					</div>
					<div class="col-md-3 z-hint"></div>
				</div>
		
				<div class="row form-group">
					<div class="z-label col-md-2">{{'Description'}}</div>
					<div class="col-md-7">
						<textarea class="form-control" rows="5" name="description" placeholder="{{ 'Enter description' }}"></textarea>
					</div>
					<div class="col-md-3 z-hint"></div>
				</div>
				<div class="row form-group">
					<div class="z-label col-md-2">{{ 'Importance' }}</div>
					<div class="col-md-7">
						<select class="form-control col-md-6" name="importance">
							<option value="0">{{"Must have"}}</option>
							<option value="1">{{"Nice to have"}}</option>
							<option value="2">{{"Consider later"}}</option>
						</select>
					</div>
				</div>

				<div class="row form-group">
					<div class="z-label col-md-2">{{ 'From' }}</div>
					<div class="col-md-7">
						<select class="form-control col-md-6" name="source">
							<option value="0">{{"Client"}}</option>
							<option value="1">{{"Market"}}</option>
							<option value="2">{{"Director"}}</option>
							<option value="3">{{"Internal"}}</option>
							<option value="4">{{"Others"}}</option>
						</select>
					</div>
				</div>
				<!-- Hidden fields are for edit -->
				<input class="hide" type="text" name="id" />
				<input class="hide" type="text" name="created" />
				 
			</form>
	      </div><!-- end of modal body -->
	      
	      <div class="modal-footer">
				<button class="btn btn-default" data-dismiss="modal">Close</button>
	        	<button class="btn btn-primary z-btn-submit">Save changes</button>
	      </div>
		
	      
	    </div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div><!-- /.modal -->		
		
	<!-- Edit Spec Modal Dialog-->
	<div class="modal fade" id="edit-spec-dialog" tabindex="-1" role="dialog" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	        <h4 class="modal-title">Specification</h4>
	      </div>
	    
		
		<div class="modal-body">
			<form id="edit-spec-form" onsubmit="return false;">
				<div class="row form-group">
					<div class="z-label col-md-2">{{'Name'}}</div>
					<div class="col-md-7">
						<input class="form-control" type="text" name="name" placeholder="{{ 'Specification name' }}" />
					</div>
					<div class="col-md-3 z-hint"></div>
				</div>
		
				<div class="row form-group">
					<div class="z-label col-md-2">{{'Description'}}</div>
					<div class="col-md-7">
						<textarea class="form-control" rows="5" name="description" placeholder="{{ 'Enter description' }}"></textarea>
					</div>
					<div class="col-md-3 z-hint"></div>
				</div>

				<div class="row form-group">
					<div class="z-label col-md-2">{{ 'Level' }}</div>
					<div class="col-md-7">
						<select class="form-control col-md-6" name="level">
							<option value="0">{{"High"}}</option>
							<option value="1">{{"Medium"}}</option>
							<option value="2">{{"Low"}}</option>
						</select>
					</div>
				</div>

				<div class="row form-group">
					<div class="z-label col-md-2">{{ 'From' }}</div>
					<div class="col-md-7">
						<select class="form-control col-md-6" name="source">
							<option value="0">{{"Client"}}</option>
							<option value="1">{{"Market"}}</option>
							<option value="2">{{"Director"}}</option>
							<option value="3">{{"Internal"}}</option>
							<option value="4">{{"Others"}}</option>
						</select>
					</div>
				</div>
						
				
				
	        </form>
	      </div>
	      
	      <div class="modal-footer">
			<button class="btn btn-default" data-dismiss="modal">Close</button>
	        <button class="btn btn-primary z-btn-submit">Save changes</button>
	      </div>
		
	      
	    </div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
		
{% endblock %}



